<template>
  <div class="page">
    <global-header title="最近聊天" @back="handleBack" />
    <main class="page-main page">
      <div class="h-[44px] px-[15px] py-[10px] bg-[#fff]">
        <van-field
          class="rounded-[10px] overflow-hidden"
          v-model="state.name"
          placeholder="搜索用户名/备注"
        >
          <template #left-icon>
            <div class="flex items-center h-full">
              <svg-icon name="chat-search"></svg-icon>
            </div>
          </template>
        </van-field>
      </div>
      <div class="px-[15px] pb-[10px] bg-[#fff]">
        <custom-tabs v-model:value="serviceState.SortField" :options="sortType" />
      </div>
      <div class="page-main overflow-y-auto" ref="scrollRef">
        <scroll-list
          enableRefresh
          emptyImage
          v-model:loading="state.loading"
          v-model:refresh="state.refresh"
          :finished="true"
          :length="searchList.length"
          @refresh="refresh"
        >
          <template v-for="(item, index) in searchList">
            <ChatItem :item="item" :last="index >= searchList.length - 2" />
          </template>
        </scroll-list>
      </div>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-main-chat",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import ChatItem from "./components/chat-item.vue";
import { useServiceStore } from "@/store/modules/service";
import { storeToRefs } from "pinia";
import { useChatPageStore } from "./hooks/useChat";

const state = reactive({
  loading: false,
  refresh: false,
  name: ""
});
const sortType = [
  { text: "在线排序", value: "online" },
  { text: "最近排序", value: "time" },
  { text: "积分排序", value: "coin" }
];
const scrollRef = ref();
const router = useRouter();
const chatStore = useChatPageStore();
const serviceStore = useServiceStore();
const { serviceState } = storeToRefs(serviceStore);

const searchList = computed(() => {
  return serviceStore.serviceList.filter(
    item =>
      item.Note.includes(state.name) ||
      item.NickName.includes(state.name) ||
      item.Name.includes(state.name)
  );
});
const getData = async () => {
  state.loading = true;
  await serviceStore.actionServiceList();
  if (scrollRef.value) {
    scrollRef.value?.scrollTo(0, 0);
  }
  state.loading = false;
};

const refresh = async () => {
  state.refresh = true;
  await serviceStore.actionServiceList();
  state.refresh = false;
};

const handleBack = () => {
  router.back();
  setTimeout(() => {
    chatStore.scrollTop = 0;
  }, 500);
};

watch(
  () => serviceState.value.SortField,
  () => {
    nextTick(getData);
  }
);

onMounted(() => {
  getData().finally(() => {
    if (scrollRef.value) {
      scrollRef.value.scrollTop = chatStore.scrollTop;
    }
  });
});
onBeforeUnmount(() => {
  if (scrollRef.value) {
    chatStore.scrollTop = scrollRef.value.scrollTop;
  }
});
</script>
<style scoped lang="scss">
:deep() {
  .van-field {
    --van-cell-background: #f3f3f3;
  }
}
</style>
